<template>
  <div>
    <el-cascader
      :value="value"
      :options="options"
      style="width: 320px;"
      :props="{ label: 'name', value: 'id' }"
      clearable
      placeholder="请选择部门"
      @change="handleChange"
    />
  </div>
</template>

<script>
// 导入封装好的获取部门列表的axios
import { getDepartmentRequest } from '@/api/department'
// 导入封装的递归函数
import { transListToTreeData } from '@/utils/index'
export default {
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      // 声明一个数组用于接收响应回来的数据
      options: []
    }
  },
  // 通过created钩子调用axios
  created() {
    this.getDepartment()
  },
  methods: {
    async getDepartment() {
      const res = await getDepartmentRequest()
      console.log(res)
      // 调用递归函数 并把响应回来的数据进行递归转换为树形数组然后 渲染页面
      this.options = transListToTreeData(res.data.data, 0)
    },
    handleChange(value) {
      console.log(value)
      // 条件判断 把我们触发过的值返回给父组件
      // 子组件在通知父组件数据发生修改的时候，这个数据有两种写法，有数据数组就有长度没有数据，数组就是空数组，
      // 向父组件 发的数据就是空的，所以要写if else 判断以下
      if (value.length > 0) {
        this.$emit('input', value[value.length - 1]) // 将最后一位的id取出来 传出去
      } else {
        this.$emit('input', null) // 如果长度为0 说明值为空
      }
    }
  }
}
</script>

<style>

</style>
